<template>
    <div>
        <div @click="popup.openPopup" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <DataFunnel24Filled/>
            </n-icon>
            <Handle id="FunnelModel-inlet" type="target" :position="Position.Left"
                    :is-valid-connection="props.isValidSourcePos"/>
            <Handle id="FunnelModel-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>招聘漏斗模型</span>
        <flow-popup-window
            :show="popup.show"
            :on-click-outside="popup.clickPopupOutside"
            :x="popup.x"
            :y="popup.y"
        >
            <n-card title="招聘漏斗模型">
                <div class="flex">
                    <div>变量参数</div>
                    <div>漏斗等级</div>
                </div>
                <div
                    v-for="index in column_level"
                    class="flex"
                >
                    <n-select
                        v-model:value="index.column"
                        :options="props.data.data.title"
                        @update:value="popup.reopen"
                        placeholder="请选择层级的字段列"
                        label-field="title"
                        value-field="key"
                    />
                    <n-select
                        v-model:value="index.level"
                        :options="levelList"
                        @update:value="popup.reopen"
                        placeholder="请选择层级"
                    />
                </div>
                <template #footer>
                    <n-space>
                        <n-button @click="getSuperiorData">获取上级节点数据</n-button>
                        <n-button @click="addColumnLevel">添加层级</n-button>
                        <n-button @click="reduceColumnLevel">删除层级</n-button>
                        <n-button @click="began">预测</n-button>
                    </n-space>
                </template>
            </n-card>
        </flow-popup-window>
    </div>
</template>

<script setup>

import {Handle, Position} from "@vue-flow/core";
import {DataFunnel24Filled} from "@vicons/fluent";
import {useElementsStore} from "@/stores/elements";
import workApi from "@/http/workApi";
import FlowPopupWindow from "@/components/VueFlowModel/vueFlowPopupWindow/FlowPopupWindow.vue";
import {toChinesNumber} from "@/hooks/toChinesNumber";

const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'id', 'data'])
const elements = useElementsStore()
// 点击弹窗
const popup = reactive({
    show: false,
    x: null,
    y: null,
    wait: false,
    clickPopupOutside: () => {
        popup.closedPopup()
    },
    openPopup: (e) => {
        popup.x = e.x
        popup.y = e.y
        popup.show = true
    },
    closedPopup: () => {
        if (!popup.wait) {
            console.log(22)
            popup.show = false;
        }
    },
    reopen: () => {
        popup.show = true
    }
})
//
const column_level = ref([
    {column: null, level: null},
])
const addColumnLevel = () => {
    column_level.value.push(
        {column: null, level: null},
    )
}
const reduceColumnLevel = () => {
    if (column_level.value.length <= 1) {
        window.$message.warning("必须保留一个")
        return
    }
    let number = column_level.value.length
    column_level.value.splice(number-1, 1)
}
const levelList = []
const createChineseNumberArray = (number) => {
    let chineseNumber = null
    for (let i = 1; i <= number; i++) {
        chineseNumber = toChinesNumber(i)
        if (chineseNumber[1] === "十" && chineseNumber[0] === "一") {
            chineseNumber = chineseNumber.slice(1)
        }
        levelList.push(
            {label: "第" + chineseNumber + "层", value: i}
        );
    }
}
createChineseNumberArray(100000)
const getSuperiorData = () => {
    // 获取上级节点数据
    for (let i of elements.elements) {
        if (i['target'] === props.id) {
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    props.data.data = {...j.data.data};
                    props.data.data.title.map(s => {
                        // 移除可修改
                        delete s.render
                        return s
                    })
                    return
                }
            }
        }
    }
}

const began = () => {
    workApi.post("perform_tasks/funnel",{
        data:props.data.data,
        column_level:column_level.value
    }).then(r=>{
        props.data.funnel = {
            legend:{data:[]},
            data:[]
        }
        r.data.map(s=>{
            props.data.funnel.data.push({value:s.conversion,name:s.name})
            props.data.funnel.legend.data.push(s.name)
        })
        console.log(props.data)
    })
}
</script>

<style scoped lang="less">
.n-card {
    width: 500px;

    p {
        margin-top: 20px;
    }

    .flex {
        display: flex;
        justify-content: space-around;

        > div {
            margin: 0 10px;
        }
    }
}
</style>